<template>
  <div class="jiance">
    <div class="top">
      <img src="../imgs/xuanfu.png" alt="" class="img" />
      <div class="tiao">
        <img src="../imgs/hengfu.png" alt="" class="img1" />
      </div>
    </div>
    <div class="bottom">
      <div demo-bg>
        <dv-scroll-board :config="config" style="width: 100%; height: 30vh" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const config = reactive({
  header: ["序号", "设备名称", "设备状态"],
  data: [
    [1, "热成像", "开启"],
    [2, "高能雷达", "关闭"],
    [3, "核打击卫星", "开启"],
    [4, "天眼", "关闭"],
    [5, "红外线扫描", "开启"],
    [6, "红外线扫描", "开启"],
    [7, "红外线扫描", "开启"],
  ],
  headerBGC: "#092793",
  oddRowBGC: "#080d54",
  evenRowBGC: "#0a1359",
  columnWidth: [150],
  align: ['center']
});
</script>

<style lang="scss">
.jiance {
  width: 80%;
  height: 100%;
  margin: 0 10%;
  .top {
    height: 25%;
    background: url("../imgs/小border.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 1%;
    display: flex;
    .img {
      width: 20%;
      height: 75%;
      margin: 2% 7%;
    }
    .tiao {
      flex: 1;
      .img1 {
        width: 60%;
        height: 60%;
        margin: 5% 10%;
      }
    }
  }
  .bottom {
    height: 70%;
    margin-top: 4%;
  }
}
</style>
